/* eslint-disable react/no-unknown-property */
/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-03 11:31:00
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-09-08 11:36:04
 * @FilePath: /utools_web/src/components/Logo3D/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Gltf } from '@react-three/drei';
import { Canvas, useFrame } from '@react-three/fiber';
import { easing } from 'maath';
import { useRef } from 'react';

const url = './logo.glb';

function CameraRig() {
  useFrame((state, delta) => {
    easing.damp3(
      state.camera.position,
      [-1 + (state.pointer.x * state.viewport.width) / 3, (1 + state.pointer.y) / 2, 4],
      0.5,
      delta,
    );
    state.camera.lookAt(0, 0, 0);
  });
}

function Box({ isin, url, position, scale, color, setIsover }) {
  const ref = useRef();

  useFrame(() => {
    const pos = { x: position[0], y: position[1], z: position[2] };
    Object.keys(pos)?.forEach((key) => {
      let val = ref.current.position[key];
      if (isin) {
        if (pos[key] > 0 && val < pos[key]) {
          ref.current.position[key] += 0.02;
          return;
        }
        if (pos[key] < 0 && val > pos[key]) {
          ref.current.position[key] -= 0.02;
          return;
        }
      } else {
        if (pos[key] === 0) {
          if (val > 0.02) {
            ref.current.position[key] -= 0.02;
            return;
          } else if (val < -0.02) {
            ref.current.position[key] += 0.02;
            return;
          } else {
            setTimeout(() => {
              setIsover?.(true);
            }, 3600);
          }
        }
      }
    });
  });

  return (
    <Gltf
      ref={ref}
      src={url}
      receiveShadow
      castShadow
      position={[0, 0, 0]}
      scale={scale}
      inject={
        <meshPhysicalMaterial
          color={color ?? 'lightblue'}
          //visible={true}//是否可见
          //metalness={1} //金属性贴图
          roughness={1} //粗糙程度 越精细镜面效果越强
          clearcoat={1} // 透明漆 罩光漆
          transmission={0.5} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
          reflectivity={1} //光的 反射率
        />
      }
    />
  );
}

function Logo3D({ theme, style, isin, isover, setIsover }) {
  return (
    <div style={{ ...style, opacity: isover ? 0 : 1, transition: 'all 0.4s' }}>
      <Canvas
        shadows
        dpr={[1, 1.5]}
        camera={{ position: [-5, 0, 5], fov: 45, near: 1, far: 10 }}
        eventSource={document.getElementById('root')}
        eventPrefix="client"
      >
        <ambientLight intensity={1} />
        <pointLight position={[10, 10, 10]} intensity={1} />
        <group position={[0, 0, 0]} scale={0.9}>
          <Box
            isin={isin}
            url={url}
            theme={theme}
            position={isin ? [0.2, 0, 0] : [0, 0, 0]}
            scale={0.012}
            color="#eea268"
          />
          <Box
            url={url}
            isin={isin}
            theme={theme}
            position={isin ? [1, 0.8, -0.5] : [0, 0, 0]}
            scale={[0.005, 0.005, 0.01]}
          />
          <Box
            url={url}
            isin={isin}
            theme={theme}
            position={isin ? [0.8, -0.3, 0] : [0, 0, 0]}
            scale={[0.003, 0.003, 0.01]}
          />
          <Box
            url={url}
            isin={isin}
            theme={theme}
            position={isin ? [-0.5, -0.5, 0.5] : [0, 0, 0]}
            scale={[0.008, 0.008, 0.01]}
          />
          <Box
            url={url}
            isin={isin}
            theme={theme}
            position={[-1.06, 1.26, 0]}
            setIsover={setIsover}
            scale={isin ? [0.003, 0.003, 0.01] : [0, 0, 0]}
            color="#eea268"
          />
        </group>

        <CameraRig />
      </Canvas>
    </div>
  );
}

export default Logo3D;
